<template>
  <div class="visualization">
    <!-- 顶部标题 -->
    <div class="header">
      <div class="left-time">
        {{ currentTime }}
      </div>
      <div class="tab-nav">
        <div
          class="tab-nav-item"
          v-for="item in tabNavList"
          :key="item.id"
          @click="handleTabNav(item.id)"
        >
          <img
            v-if="activeTabNav === item.id"
            src="@/assets/images/yiping/nav-s.png"
            alt=""
          />
          <img v-else src="@/assets/images/yiping/nav.png" alt="" />
          <span class="tab-nav-item-text">{{ item.name }}</span>
        </div>
      </div>
      <div class="title">普陀区环卫设施数据管理平台</div>
      <div class="operation">
        <div class="op-top">
          <el-button
            style="
              background: transparent;
              border: 1px solid #fff;
              color: #fff;
              font-size: 18px;
              margin-right: 50px;
            "
            @click="goBackList"
            >返回列表</el-button
          >

          <el-avatar
            :size="32"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <span class="username">admin</span>

          <img
            class="set-icon"
            src="@/assets/images/yiping/set.png"
            alt=""
            @click="openSetDrawer"
          />
        </div>
        <div class="op-bottom">
          <div
            style="
              width: 140px;
              color: #409eff;
              font-size: 18px;
              margin-right: 8px;
            "
          >
            按街道分布
          </div>
          <el-select
            v-model="streetId"
            placeholder="请选择街道"
            clearable
            @change="handleStreetChange"
          >
            <el-option
              v-for="item in streetList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
    </div>
    <publicToilet
      v-if="activeTabNav === 1"
      :streetId="streetId"
      ref="publicToiletRef"
    ></publicToilet>
    <garbageStation
      v-if="activeTabNav === 2"
      :streetId="streetId"
      ref="garbageStationRef"
    ></garbageStation>
    <recyclingStation
      v-if="activeTabNav === 3"
      :streetId="streetId"
      ref="recyclingStationRef"
    ></recyclingStation>
    <sanitationRoom
      v-if="activeTabNav === 4"
      :streetId="streetId"
      ref="sanitationRoomRef"
    ></sanitationRoom>
    <parkingLots
      v-if="activeTabNav === 5"
      :streetId="streetId"
      ref="parkingLotsRef"
    ></parkingLots>

    <!-- 修改密码组件 -->
    <ChangePassword ref="changePasswordRef" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { streetsList } from "@/api/index.js";
import { useRouter } from "vue-router";
// 公共厕所
import publicToilet from "./publicToilet.vue";
// 垃圾站
import garbageStation from "./garbageStation.vue";
// 回收站
import recyclingStation from "./recyclingStation.vue";
// 保洁房
import sanitationRoom from "./sanitationRoom.vue";
// 导入修改信息组件
import ChangePassword from "@/components/ChangePassword.vue";
// 环卫停车场
import parkingLots from "./parkingLots.vue";

defineOptions({
  name: "ScreenManage",
});
const router = useRouter();
const tabNavList = ref([
  { name: "公共厕所", id: 1 },
  { name: "垃圾压缩站", id: 2 },
  { name: "可回收物点站场", id: 3 },
  { name: "环卫道班房", id: 4 },
  { name: "环卫停车场", id: 5 },
]);
const activeTabNav = ref(1);
const streetId = ref(null);
const streetList = ref([]);
const changePasswordRef = ref(null); // 修改密码组件引用

const publicToiletRef = ref(null);
const garbageStationRef = ref(null);
const recyclingStationRef = ref(null);
const sanitationRoomRef = ref(null);
const parkingLotsRef = ref(null);
const formatDateManually = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的
  const day = String(date.getDate()).padStart(2, "0");
  const weekday = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ][date.getDay()]; // 获取星期的名称
  const hour = date.getHours(); // 获取小时（24小时制）
  const hour12 = hour % 12 || 12; // 转换为12小时制（如果需要）
  const ampm = hour < 12 ? "上午" : "下午"; // 判断上午或下午
  const minute = String(date.getMinutes()).padStart(2, "0"); // 分钟补零
  return `${year}.${month}.${day} ${weekday} ${ampm}${hour}:${minute}`;
};

// 当前时间
const currentTime = ref(formatDateManually(new Date()));
setInterval(() => {
  currentTime.value = formatDateManually(new Date());
}, 10000);

const goBackList = () => {
  router.back();
};

const openSetDrawer = () => {
  changePasswordRef.value.openDrawer();
};
const handleTabNav = (id) => {
  activeTabNav.value = id;
};

const handleStreetChange = (id) => {
  streetId.value = id;
  if (activeTabNav.value == 1) {
    publicToiletRef.value.getData(id);
  } else if (activeTabNav.value == 2) {
    garbageStationRef.value.getData(id);
  } else if (activeTabNav.value == 3) {
    recyclingStationRef.value.getData(id);
  } else if (activeTabNav.value == 4) {
    sanitationRoomRef.value.getData(id);
  } else if (activeTabNav.value == 5) {
    parkingLotsRef.value.getData(id);
  }
};

// 处理窗口大小变化
const handleResize = () => {};

onMounted(() => {
  window.addEventListener("resize", handleResize);
  streetsList({}).then((res) => {
    if (res.code == 0) {
      streetList.value = res.data || [];
    }
  });
});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<style lang="scss" scoped>
@use "./index.scss" as *;
</style>
